<template>
  <el-dialog :title="eOra?'新增学生信息':'编辑学生信息'" v-model="visible" :close-on-click-modal="false" @closed="cancel"
             destroy-on-close width="60%" @closed="cancel">
    <el-form style="margin-top: 20px;" label-width="120px"  :model="stuForm">
      <el-form-item label="班级名称:">
        <el-input placeholder="班级名称" v-model="stuForm.classGrade" :readonly="!eOra?true:false"></el-input>
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input  placeholder="姓名" v-model="stuForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄:">
        <el-input  placeholder="年龄" v-model="stuForm.age"></el-input>
      </el-form-item>
      <el-form-item label="性别:" >
          <el-select v-model="stuForm.gender" style="width:100%">
            <el-option
                v-for="(item, index) of sexList"
                :key="index"
                :label="item.name"
                :value="item.value"
            />
          </el-select>
      </el-form-item>
      <el-form-item label="联系人:">
        <el-input  placeholder="联系人" v-model="stuForm.emergencyContact"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input  placeholder="联系电话" v-model="stuForm.emergencyMobile"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button v-if="eOra" type="primary" @click="confirm" >添加</el-button>
        <el-button v-else type="primary" @click="edit" >更新</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
function getForm(){
  return {
    classId:null,
    classGrade:'',
    // parent:null,
    name:'',
    age:null,
    gender:'MALE',
    emergencyContact:"",
    emergencyMobile:""
  }
}
export default {
  name: "AddStuialog",
  props: {
    visible: Boolean,
    classObject:Object,
    eOra:Number
  },
  emits: ['on-cancel', 'on-confirm'],
  data(){
    return{
      sexList:[
        {
          name:"男",
          value:"MALE"
        },
        {
          name:"女",
          value:"FEMALE"
        }
      ],
      stuForm:getForm()
    }
  },
  watch: {
    /**
     * 监听属性变化
     */
    classObject(newValue) {
      const {id, name} = newValue;
      this.stuForm = {...getForm(), classId:id,classGrade:name};
      console.log("子组件变化",this.stuForm)
    }
  },
  mounted(){
    const  {id, name} =this.classObject;
    this.stuForm = {...this.stuForm, classId:id,classGrade:name}
  },
  methods:{
    /**
     * 取消回调
     */
    getstuForm(){

    },
    cancel() {
      this.$emit('on-cancel');
    },
    reset(){
      const  {id, name} =this.classObject;
      this.stuForm = {...getForm(),classId:id,classGrade:name};
    },
    edit(){
      this.$emit('on-edit',this.stuForm);
    },
    confirm() {
      const  {id, name} =this.classObject;
      this.$emit('on-confirm',this.stuForm);
    }
  }
}
</script>

<style scoped>

</style>